<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="variationTypeClick">
        <el-tab-pane name="zz">
            <template #label>
                转正<span class="custom-tabs-label">{{state.waitturnRegular_Num}}</span>
            </template>
            <TurnRegular></TurnRegular>
        </el-tab-pane>
        <el-tab-pane label="调动" name="dd">
            <template #label>
                调动<span class="custom-tabs-label">{{state.waittransfers_Num}}</span>
            </template>
            <transfers></transfers>
        </el-tab-pane>
        <el-tab-pane label="离职" name="lz">
            <template #label>
                离职<span class="custom-tabs-label">{{state.waitDimission_Num}}</span>
            </template>
            <dimission></dimission>
        </el-tab-pane>
        <el-tab-pane label="异动记录" name="ydjl">
            <variationHistory></variationHistory>
        </el-tab-pane>
    </el-tabs>
</template>
<style>
    span.custom-tabs-label{
        margin-left: 8px;
        padding: 3px 8px;
        background-color: rgb(247, 202, 57);
        color: #333333;
        border-radius: 15px;
        font-weight: bold;
    }
</style>
<script lang="ts" setup name="variation">
import { ref,reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'

// 子组件
import TurnRegular from '/@/views/employee/variation/component/turnRegular.vue';
import transfers from '/@/views/employee/variation/component/transfers.vue';
import dimission from '/@/views/employee/variation/component/dimission.vue';
import variationHistory from '/@/views/employee/variation/component/variationHistory.vue';

const state = reactive({
        waitDimission_Num:4,
        waittransfers_Num:3,
        waitturnRegular_Num:4,
});

const activeName = ref('zz')
const variationTypeClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>